<template>
    <div class="authority">
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true">
                <el-form-item label="昵称">
                    <el-input v-model="searchInfo.nickName" placeholder="请输入" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="onSubmit">
                        查询
                    </el-button>
                    <el-button icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box unit">
            <el-table :data="tableData" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="头像">
                    <template #default="scope">
                        <img v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl"
                            style="width: 50px;height:50px;border-radius: 50%;">
                        <img v-else src="@/assets/noBody.png" style="width: 50px;height:50px;border-radius: 50%;">
                    </template>
                </el-table-column>
                <el-table-column align="left" label="昵称" prop="nickName" show-overflow-tooltip></el-table-column>
                <el-table-column align="left" label="手机号" prop="mobile" show-overflow-tooltip></el-table-column>
                <el-table-column align="left" label="二维码">
                    <template #default="scope">
                        <img v-if="scope.row.erCode" :src="scope.row.erCode"
                            style="width: 50px;height:50px;border-radius: 50%;">
                        <img v-else src="@/assets/noBody.png" style="width: 50px;height:50px;border-radius: 50%;">
                    </template>
                </el-table-column>
                <el-table-column align="left" label="最后登录时间" prop="lastLoginAt" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ formatTimestamps(scope.row.lastLoginAt) }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="140">
                    <template #default="scope">
                        <el-button type="primary" link icon="edit" @click="editUnit(scope.row)">
                            分配调位
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="gva-pagination">
                <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
                    layout="prev, pager, next" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-drawer v-model="dialogFormVisible" :size="appStore.drawerSize" :before-close="handleClose"
            :show-close="false">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ dialogTitle }}</span>
                    <div>
                        <el-button @click="closeDialog">取消</el-button>
                        <el-button type="primary" @click="enterDialog">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="dialogFormVisible" ref="yyglForm" label-width="150" :model="form" :rules="rules">
                <template #header>
                    <div class="flex justify-between items-center">
                        <span class="text-lg">鱼池钓位</span>
                        <div>
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                        </div>
                    </div>
                </template>
                <el-form-item label="鱼池" prop="pondId">
                    <el-input v-model="form.pondId" placeholder="请选择" @click="showYc" />
                </el-form-item>
                <el-form-item label="钓位" prop="spotId">
                    <el-select v-model.number="form.spotId" placeholder="请选择">
                        <el-option v-for="item in dwList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-drawer>
        <el-drawer v-model="ycVisible" :size="appStore.drawerSize" :before-close="handleClose" :show-close="false">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">选择鱼池</span>
                    <div>
                        <el-button @click="ycVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmYc">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="ycVisible" label-width="150">
                <template #header>
                    <div class="flex justify-between items-center">
                        <span class="text-lg">鱼池钓位</span>
                        <div>
                            <el-button @click="ycVisible = false">取消</el-button>
                        </div>
                    </div>
                </template>
                <el-table :data="ycData" class="table-style" ref="multipleTable" row-key="id" @select="selectInfo">
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column type="index" label="序号" width="100" />
                    <el-table-column align="left" label="名称" prop="name"></el-table-column>
                    <el-table-column align="left" label="开放时间" prop="openTime"></el-table-column>
                    <el-table-column align="left" label="收费金额" prop="feeRuleAmount"></el-table-column>
                    <el-table-column align="left" label="收费类型">
                        <template #default="scope">
                            <span>{{ scope.row.feeRuleUnit == 1 ? '按斤' : '按小时' }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </el-drawer>
    </div>
</template>
<script setup>
import {
    fishGroundsList,
    groundsChangeStatus,
    groundsDelete,
    groundsAdd,
@/api/tiku fishPondList,
    fishSpotList
} from '@/api/diaochangguanli'
import {
    getAuthorityList
} from '@/api/authority'
import {
    userList,
    allocationSpot
} from '@/api/user'
import { formatTimestamps } from '@/utils/format'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import { sortBySort } from '@/utils/format'
// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
    name: 'Yygl'
})
const appStore = useAppStore()
const form = ref({
    spotId: '',
    pondId: '',
    userId: '',
    pondName: ''
})

const searchInfo = ref({
    nickName: ''
})

const userStore = useUserStore()

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const rules = reactive({
    pondId: [{ required: true, message: '请选择鱼池', trigger: 'change' }],
    spotId: [{ required: true, message: '请选择钓位', trigger: 'change' }]
})

const yyglForm = ref(null)

const initForm = () => {
    yyglForm.value.resetFields()
    form.value = {
        spotId: '',
        pondId: '',
        userId: '',
        pondName: ''
    }
    dwList.value = []
}

const isEdit = ref(false)
const dialogTitle = ref('新增')
const addUnit = () => {
    dialogTitle.value = '新增'
    isEdit.value = false
    dialogFormVisible.value = true
}
const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}

const handleClose = (done) => {
    initForm()
    done()
}

const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
    const res = await userList({
        pageNumber: page.value,
        pageSize: pageSize.value,
        ...searchInfo.value
    })
    if (res.code == 200) {
        tableData.value = res.result.data
        total.value = res.result.total
    }
}
getTableData()

const ycPage = ref(0)
const ycPageSize = ref(10)
const ycTotal = ref(0)
const ycData = ref([])
onMounted(async () => {
    const res = await fishPondList({
        pageNumber: ycPage.value,
        pageSize: ycPageSize.value
    })
    if (res.code == 200) {
        ycData.value = res.result.data
        ycTotal.value = res.result.total
    }
})
const statusChange = (id, val) => {
    groundsChangeStatus(id).then(res => {
        ElMessage({
            type: 'success',
            message: '状态修改成功!'
        })
        getTableData()
    })
}

const enterDialog = async () => {
    yyglForm.value.validate(async (valid) => {
        if (valid) {
            console.log(form.value, 'form.value');
            let res
            if (isEdit.value) {
                res = await allocationSpot(form.value)
            } else {
                res = await allocationSpot(form.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isEdit.value ? '分配成功' : '分配成功'
                })
                getTableData()
            }
            initForm()
            dialogFormVisible.value = false
        }
    })
}

const delUnit = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await groundsDelete(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getTableData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

const editUnit = async (row) => {
    isEdit.value = true
    dialogTitle.value = '分配钓位'
    form.value.userId = row.id
    dialogFormVisible.value = true
}

const onSubmit = () => {
    page.value = 1
    getTableData()
}

const onReset = () => {
    page.value = 1
    searchInfo.value = {
        nickName: ''
    }
    getTableData()
}
const ycVisible = ref(false)
const multipleTable = ref(null)
function showYc() {
    ycVisible.value = true
}
function selectInfo(selection, row) {
    console.log(selection, row);
    multipleTable.value.clearSelection();
    if (selection.length == 0) return;
    multipleTable.value.toggleRowSelection(row, true);
    form.value.pondId = row.id
    form.value.pondName = row.name
}
const dwList = ref([])
function confirmYc() {
    if (!form.value.pondId) {
        ElMessage({
            type: 'info',
            message: '请选择鱼池'
        })
        return
    }
    fishSpotList(form.value.pondId).then(res => {
        dwList.value = res.result
        ycVisible.value = false
    })
}
</script>

<style lang="scss">
.table-style {
    .el-table-column--selection.is-leaf .el-checkbox {
        display: none;
    }
}
</style>